<template>
  <el-dialog title="设置" :visible.sync="dialogVisible" width="600px" append-to-body :close-on-click-modal="false">
    <div>
      <el-form ref="optionsForm" :model="localRowData" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="自定义名称" required :rules="fieldNameRules" prop="fieldName" :label-width="formLabelWidth">
              <el-input v-model="localRowData.fieldName" placeholder="配送区域"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字段类型" prop="fieldType" :label-width="formLabelWidth">
              <el-select v-model="localRowData.fieldType" placeholder="请选择">
                <el-option label="选项-单选" value="select"></el-option>
                <el-option label="选项-多选" value="selectMultiple"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-table
          :data="localRowData.fieldOptionsFacade"
          style="width: 100%"
          :header-cell-style="{ background: '#eee', color: '#666' }"
          border
        >
          <el-table-column label="序号" width="100" align="center">
            <template slot-scope="scope">
              <div class="index-cell">
                <i
                  @click.stop="addRow(scope.$index)"
                  style="color: #1893fc; font-size: 22px; font-weight: bold; cursor: pointer"
                  class="el-icon-circle-plus-outline"
                ></i>
                <span class="idx">{{ scope.$index < 9 ? '0' + (scope.$index + 1) : scope.$index + 1 }}</span>
                <i
                  @click.stop="handleRemove(scope.$index)"
                  style="color: #fb1919; font-size: 22px; font-weight: bold; cursor: pointer"
                  class="el-icon-remove-outline"
                ></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="选项" align="center">
            <template slot-scope="scope">
              <el-form-item
                :prop="'fieldOptionsFacade.' + scope.$index + '.option'"
                :rules="optionRules"
                style="margin-bottom: 0"
              >
                <el-input v-model="scope.row.option"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
        <el-button
          @click="addRow(-1)"
          type="primary"
          size="small"
          style="margin-top: 10px"
          >新增</el-button
        >
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="small">取消</el-button>
      <el-button type="primary" @click="handleSave" size="small">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { message } from 'ant-design-vue/es'
export default {
  props: {
    rowData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      dialogVisible: false,
      formLabelWidth: '100px',
      localRowData: {},
      fieldNameRules: [{ required: true, message: '请输入自定义名称', trigger: 'blur' }],
      optionRules: [{ required: true, message: '请输入选项内容', trigger: 'blur' }],
    }
  },
  methods: {
    addRow(index) {
      if (!this.localRowData.fieldOptionsFacade) {
        this.localRowData.fieldOptionsFacade = []
      }
      if (this.localRowData.fieldOptionsFacade.length >= 10) {
        message.warning('最多添加10个选项')
        return
      }
      if (index === -1) {
        this.localRowData.fieldOptionsFacade.push({ option: '' })
      } else {
        this.localRowData.fieldOptionsFacade.splice(index + 1, 0, { option: '' })
      }
    },
    handleRemove(index) {
      this.localRowData.fieldOptionsFacade.splice(index, 1)
    },
    handleSave() {
      this.$refs.optionsForm.validate((valid) => {
        console.log(valid, '---valid')
        if (valid) {

          // 校验选项是否重复
          const options = this.localRowData.fieldOptionsFacade.map(item => item.option)
          const uniqueOptions = [...new Set(options)]
          if (options.length !== uniqueOptions.length) {
            this.$message.warning('选项不能重复')
            return
          }

          if (this.localRowData.fieldOptionsFacade.length === 0) {
              this.$message.warning('请至少添加一个选项')
            return
          }
          this.$emit('saveOptions', this.localRowData)
          this.dialogVisible = false
        }
      })
    },
    openDialog(row) {
      this.dialogVisible = true
      this.localRowData = JSON.parse(JSON.stringify(row))
    },
  },
}
</script>

<style lang="scss" scoped>
.index-cell {
  display: flex;
  align-items: center;
}
.el-table__row:hover .index-cell {
  background-color: #f5f7fa;
}
.dialog-footer {
  text-align: right;
}
.index-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .idx {
    display: inline-block;
  }
  /* 默认隐藏图标 */
  .el-icon-circle-plus-outline,
  .el-icon-remove-outline {
    visibility: hidden;
  }
}

.el-table__row:hover .index-cell {
  background-color: #f5f7fa;
  /* 鼠标悬停时显示图标 */
  .el-icon-circle-plus-outline,
  .el-icon-remove-outline {
    // display: inline-block;
    visibility: visible;
  }
  // .idx {
  //   display: none;
  // }
}
:deep(.el-input__inner) {
  height: 30px !important;
}
:deep(.el-table__cell) {
  padding: 0 10px !important;
  .cell {
    padding: 15px 0 !important;
  }
  .el-form-item__error{
    padding-top: 1px;
  }
}
</style>
